<template>
  <div id="layout">
    <el-container>
      <el-header height="60px">
        <div class="header-box">
          <div class="header-left" @click="$router.push('/home')">
            <img src="@/assets/img/logo.png" width="35px" /><span
              >聚合空间</span
            >
          </div>
          <div class="header-center">
            <div
              v-for="item in navHeader"
              :key="item.id"
              @click="changeNav(item.id)"
              class="center-item"
              :class="activeIndex == item.id ? 'active-header' : ''"
            >
              {{ item.value }}
            </div>
          </div>
          <div class="header-right">
            <div>
              <el-input
                placeholder="搜索感兴趣的内容"
                v-model="searchValue"
                class="input-with-select"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="search"
                ></el-button>
              </el-input>
            </div>
            <div class="reg-box">
              <span @click="login">登录</span>&nbsp;/&nbsp;<span @click="regist"
                >注册</span
              >
            </div>
          </div>
        </div>
      </el-header>
      <el-main>
        <!-- 路由出口 -->
        <router-view />
      </el-main>
      <el-footer height="80px">MIT Licensed | Copyright © 2023</el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "layoutPage",
  components: {},
  data() {
    return {
      navHeader: [
        { id: 1, value: "首页" },
        { id: 2, value: "视频" },
        { id: 3, value: "图集" },
      ],
      activeIndex: 1,
      searchValue: "",
    };
  },
  methods: {
    changeNav(id) {
      this.activeIndex = id;
      if (id == 1) {
        this.$router.push("/home");
      } else if (id == 2) {
        this.$router.push("/video");
      } else if (id == 3) {
        this.$router.push("/picture");
      }
    },
    notice() {
      this.$notify({
        title: "温馨提示",
        message: "功能开发中,敬请期待",
        type: "success",
        duration: 1500,
      });
    },
    login() {
      this.notice();
    },
    regist() {
      this.notice();
    },
    search() {
      this.notice();
    },
  },
  created() {},
};
</script>

<style lang="less" scoped>
.el-container {
  // margin-bottom: 40px;
  .el-header,
  .el-footer {
    background: #ffffff;
    box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.04);
    line-height: 60px;
    text-align: center;
  }
  .el-header {
    width: 100%;
    display: flex;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    .header-box {
      width: 1180px;
      // border: 1px solid yellowgreen;
      display: flex;
      .header-left {
        display: flex;
        align-items: center;
        > span {
          font-size: 25px;
          font-weight: bold;
          color: #80c4ae;
          cursor: pointer;
          margin-left: 5px;
        }
      }
      .header-center {
        margin-left: 12%;
        margin-right: 16%;
        // border: 1px solid yellow;
        display: flex;
        .center-item {
          padding: 0 30px;
          font-weight: bold;
          cursor: pointer;
        }
        .active-header {
          color: #fff;
          background-color: #80c4ae;
        }
      }
      .header-right {
        display: flex;
        width: 35%;
        justify-content: space-between;
        .input-with-select {
          // border: 1px solid #80c4ae;
          ::v-deep .el-input__inner {
            border-color: #80c4ae !important;
          }
          ::v-deep .el-input-group__append {
            border-color: #80c4ae !important;
            .el-icon-search {
              color: #80c4ae;
            }
          }
        }
        .reg-box {
          // width: 100px;
          cursor: pointer;
          > span:hover {
            color: #80c4ae;
          }
        }
      }
    }
  }
  .el-main {
    width: 100%;
    margin-top: 60px;
    display: flex;
    justify-content: center;
  }
  .el-footer {
    background-color: #333;
    color: #fff;
  }
}
</style>